<template>
    <a-layout-sider id="layout-sider" width="270">
        <div style="display: flex;flex-direction: column;height: 100%;justify-content: space-between">
            <div style="font-size: 12px;color: #9EA0A5;
                    margin: 30px 0 14px 30px;
                    font-weight: 500">
                MENU
            </div>
            <div style="display: flex;flex-direction: column;justify-content: space-between;flex: 1;">
                <div>
                    <router-link v-for="(item,index) in menus"
                                 :key="index"
                                 class="menu-content"
                                 :to="item.path"
                                 exact>
                        <div class="item">
                            {{item.title}}
                        </div>
                        <div></div>
                    </router-link>
                </div>
                <div style="height: 70px;border-top: 1px solid #EAEDF3;display: flex;padding: 0 30px;
                flex-direction: row;align-items: center;justify-content: space-between">
                    <div style="color: #9EA0A5">
                        © Social Network
                    </div>
                    <div style="color: #9EA0A5">
                        help?
                    </div>
                </div>
            </div>
        </div>
    </a-layout-sider>
</template>

<script>
    export default {
        name: 'UserMenu',
        data () {
            return {
            };
        },
        computed: {
            menus () {
                return this.$store.getters.getUserMenus;
            },
        },

    };
</script>

<style scoped lang="scss">
    #layout-sider {
        overflow: auto;
        border-right: 1px solid #EAEDF3;
        background-color: white;
    }

    .menu-content {
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        transition: all 0.3s;

        .item {
            font-size: 14px;
            font-weight: 500;
            margin-left: 30px;
            color: #3E3F42;
            transition: all 0.3s;
            transition-delay: 0.2s;
        }
    }

    .active {
        background-color: #F6F9FD;

        .item {
            color: #1665D8;
        }
    }
</style>
